<script setup>

import { ref } from 'vue'

const selectedType = ref('医疗健康');
const searchText = ref('');

const addKnowledge = () => {
  // 新增知识的方法
};

const search = () => {
  // 查询的方法
};

const items = ref([
  { serialNumber: 1, knowledgeName: '气滞血瘀的诊疗方法', knowledgeType: 1, conclusion: '结论1', sort: 2, trustLevel: 100, enable: true },
  { serialNumber: 2, knowledgeName: '血红蛋白过高治疗方法', knowledgeType: 2, conclusion: '结论2', sort: 3, trustLevel: 80, enable: false },
  { serialNumber: 3, knowledgeName: '淋巴细胞过少治疗方法', knowledgeType: 3, conclusion: '结论3', sort: 1, trustLevel: 70, enable: true },
  { serialNumber: 4, knowledgeName: '淋巴细胞过少且血小板过多治疗方法', knowledgeType: 4, conclusion: '结论4', sort: 9, trustLevel: 100, enable: false },
  { serialNumber: 5, knowledgeName: '肾虚盗汗治疗方法', knowledgeType: 5, conclusion: '结论5', sort: 6, trustLevel: 98, enable: true }
])

//查看按钮
const viewItem = () => {
}

// 编辑按钮
const editItem = () => {
}

// 删除按钮
const deleteItem = () => {
}

</script>

<template>
  <div class="main-content">

    <div class="title">推理决策/知识库管理</div>

    <!-- 表格上一行 -->
    <div class="hang">
      <button @click="addKnowledge">新增知识</button>
      <select v-model="selectedType">
        <option value="医疗健康">医疗健康</option>
        <option value="电商营销">电商营销</option>
        <option value="物流金融">物流金融</option>
      </select>
      <input type="text" v-model="searchText" placeholder="请输入知识名称">
      <button @click="search">查询</button>
    </div>
    <!-- 表格上一行---end -->

    <!-- 表格 -->
    <div class="container mx-auto">
      <table class="w-full border-collapse table-fixed">
        <thead>
          <tr>
            <th class="w-1/12 border">序号</th>
            <th class="w-2/12 border">知识名称</th>
            <th class="w-1/12 border">知识类型(规则标题)</th>
            <th class="w-2/12 border">结论</th>
            <th class="w-1/12 border">排序</th>
            <th class="w-1/12 border">可信度(%)</th>
            <th class="w-1/12 border">是否启用</th>
            <th class="w-3/12 border">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in items" :key="index">
            <td class="border">{{ item.serialNumber }}</td>
            <td class="border">{{ item.knowledgeName }}</td>
            <td class="border">{{ item.knowledgeType }}</td>
            <td class="border">{{ item.conclusion }}</td>
            <td class="border">{{ item.sort }}</td>
            <td class="border">{{ item.trustLevel }}%</td>

            <td>
              <label class="checkbox-container">
                <input type="checkbox" background-color="red" v-model="item.enable">
                <span class="checkmark" :class="{ checked: item.enable }"></span>
              </label>
            </td>

            <td class="border flex justify-space-between">
              <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mx-2"
                @click="viewItem(item)">查看</button>
              <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mx-2"
                @click="editItem(item)">编辑</button>
              <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mx-2"
                @click="deleteItem(item)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 表格---end -->
  </div>
</template>


<style scoped>
/* 复选框start */
.checkbox-container {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 10px;
  background-color: rgba(128, 128, 128, 0.33);
  border-radius: 5px;
}

.checkbox-container input {
  display: none;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.checkbox-container input:checked+.checkmark {
  background-color: rgb(36, 204, 6);
  transform: translateX(10px);
}

.checkmark.checked {
  background-color: rgb(132, 242, 132);
  transform: translateX(10px);
}

/* 复选框end------------------------------------------- */

/* 总的右边内容 */

.main-content {
  display: inline-block;
  vertical-align: top;
  /* 垂直对齐 */
}

/* 第一句话 */
.title {
  background-color: #f2f2f2;
  color: #333;
  padding: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 第一句话--------------------------------end */

/* 右边第一行 */
.hang {
  text-align: center;
  margin-top: 20px;
}

button,
select,
input {
  margin: 5px;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button:hover,
select:hover,
input:hover {
  background-color: #f2f2f2;
}

/* 右边第一行--------------------end */

/* 表格的样式 */
.container {
  display: inline-block;
  margin-top: 40px;
  margin-left: 60px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 表格的样式--------------------------------------end */


/* 总的右边内容--end */
</style>